<template>
    <div class="app-layout">
        <!-- 顶部导航栏 -->
        <header class="app-header">
            <nav class="nav-container">
                <!-- 左侧 Logo 和导航 -->
                <div class="nav-left">
                    <div class="logo-section">
                        <div class="logo">
                            <el-icon class="logo-icon">
                                <Box />
                            </el-icon>
                            <span class="logo-text">3D-Generator</span>
                        </div>
                    </div>

                    <div class="nav-menu">
                        <router-link v-for="item in menuItems" :key="item.path" :to="item.path" class="nav-item"
                            :class="{ 'active': $route.path === item.path }">
                            <el-icon class="nav-icon">
                                <component :is="item.icon" />
                            </el-icon>
                            <span class="nav-text">{{ item.label }}</span>
                        </router-link>
                    </div>
                </div>

                <!-- 右侧工具栏 -->
                <div class="nav-right">
                    <!-- 搜索框 -->
                    <div class="search-box">
                        <el-input v-model="searchQuery" placeholder="搜索模型..." size="small" class="search-input"
                            clearable>
                            <template #prefix>
                                <el-icon class="search-icon">
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                    </div>

                    <!-- 工具按钮组 -->
                    <div class="toolbar">
                        <!-- 主题切换 -->
                        <el-button class="tool-button" @click="toggleTheme" :title="isDarkMode ? '切换到亮色模式' : '切换到深色模式'">
                            <el-icon>
                                <Sunny v-if="isDarkMode" />
                                <Moon v-else />
                            </el-icon>
                        </el-button>

                        <!-- 全屏按钮 -->
                        <el-button class="tool-button" @click="toggleFullscreen" title="全屏">
                            <el-icon>
                                <FullScreen />
                            </el-icon>
                        </el-button>

                        <!-- 通知中心 -->
                        <div class="notification-container">
                            <!-- 通知触发按钮 -->
                            <el-button class="notification-trigger" @click="toggleNotifications"
                                :class="{ 'has-unread': hasUnreadNotifications }">
                                <el-icon class="notification-icon">
                                    <Bell />
                                </el-icon>
                                <el-badge v-if="unreadCount > 0" :value="unreadCount > 99 ? '99+' : unreadCount"
                                    :max="99" class="notification-badge" />
                            </el-button>

                            <!-- 通知面板 -->
                            <Transition name="notification-slide">
                                <div v-if="showNotifications" class="notification-panel">
                                    <!-- 面板头部 -->
                                    <div class="notification-header">
                                        <div class="header-left">
                                            <h3 class="header-title">通知中心</h3>
                                            <span v-if="unreadCount > 0" class="unread-indicator">
                                                {{ unreadCount }} 条未读
                                            </span>
                                        </div>
                                        <div class="header-actions">
                                            <el-button v-if="unreadCount > 0" text size="small" @click="markAllAsRead"
                                                class="mark-all-btn">
                                                全部已读
                                            </el-button>
                                            <el-button text size="small" @click="toggleNotifications" class="close-btn">
                                                <el-icon>
                                                    <Close />
                                                </el-icon>
                                            </el-button>
                                        </div>
                                    </div>

                                    <!-- 通知列表 -->
                                    <div class="notification-content">
                                        <div v-if="notifications.length === 0" class="empty-state">
                                            <el-icon class="empty-icon">
                                                <DocumentCopy />
                                            </el-icon>
                                            <p class="empty-text">暂无通知</p>
                                        </div>

                                        <div v-else class="notification-list">
                                            <div v-for="notification in notifications" :key="notification.id"
                                                class="notification-item" :class="{
                                                    'unread': !notification.read,
                                                    'evaluation-report': notification.type === 'evaluation_report'
                                                }" @click="handleNotificationClick(notification)">
                                                <!-- 通知图标 -->
                                                <div class="notification-item-icon">
                                                    <el-icon :class="getNotificationIconClass(notification.type)"
                                                        class="item-icon">
                                                        <component :is="getNotificationIcon(notification.type)" />
                                                    </el-icon>
                                                </div>

                                                <!-- 通知内容 -->
                                                <div class="notification-item-content">
                                                    <div class="item-header">
                                                        <h4 class="item-title">{{ notification.title }}</h4>
                                                        <span class="item-time">{{ formatTime(notification.createdAt)
                                                            }}</span>
                                                    </div>
                                                    <p class="item-message">{{ notification.message }}</p>

                                                    <!-- 评估报告特殊操作 -->
                                                    <div v-if="notification.type === 'evaluation_report'"
                                                        class="item-actions" @click.stop>
                                                        <el-button size="small" type="primary" text
                                                            @click="viewReport(notification.reportId)">
                                                            查看报告
                                                        </el-button>
                                                        <el-button v-if="notification.model3dUrl" size="small"
                                                            type="success" text
                                                            @click="view3DModel(notification.model3dUrl)">
                                                            查看模型
                                                        </el-button>
                                                    </div>
                                                </div>

                                                <!-- 未读指示器 -->
                                                <div v-if="!notification.read" class="unread-dot"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 面板底部 -->
                                    <div v-if="notifications.length > 0" class="notification-footer">
                                        <el-button text size="small" @click="clearAllNotifications"
                                            class="clear-all-btn">
                                            清空所有通知
                                        </el-button>
                                    </div>
                                </div>
                            </Transition>

                            <!-- 遮罩层 -->
                            <Transition name="overlay-fade">
                                <div v-if="showNotifications" class="notification-overlay" @click="toggleNotifications">
                                </div>
                            </Transition>
                        </div>

                        <!-- 用户菜单 -->
                        <el-dropdown @command="handleUserCommand" class="user-dropdown">
                            <div class="user-avatar">
                                <el-avatar :size="32"
                                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                                    class="avatar" />
                                <el-icon class="dropdown-arrow">
                                    <ArrowDown />
                                </el-icon>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu class="user-dropdown-menu">
                                    <el-dropdown-item command="profile" class="dropdown-item">
                                        <el-icon>
                                            <User />
                                        </el-icon>
                                        个人资料
                                    </el-dropdown-item>
                                    <el-dropdown-item command="settings" class="dropdown-item">
                                        <el-icon>
                                            <Setting />
                                        </el-icon>
                                        设置
                                    </el-dropdown-item>
                                    <el-dropdown-item divided command="logout" class="dropdown-item logout">
                                        <el-icon>
                                            <SwitchButton />
                                        </el-icon>
                                        退出登录
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </nav>
        </header>

        <!-- 主内容区域 -->
        <main class="app-main">
            <router-view />
        </main>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    Box,
    Bell,
    Close,
    DocumentCopy,
    Document,
    Star,
    Warning,
    InfoFilled,
    SuccessFilled,
    Search,
    Sunny,
    Moon,
    FullScreen,
    ArrowDown,
    User,
    Setting,
    SwitchButton,
    HomeFilled,
    Files,
    DataAnalysis,
    PieChart
} from '@element-plus/icons-vue'

import { queryReport } from '@/api/report/index'

const router = useRouter()
const route = useRoute()

// 导航菜单配置
const menuItems = ref([
    {
        path: '/',
        label: '首页',
        icon: HomeFilled
    },
    {
        path: '/generator',
        label: '3D生成',
        icon: Box
    },
    {
        path: '/models',
        label: '模型库',
        icon: Files
    },
    {
        path: '/analysis',
        label: '分析报告',
        icon: DataAnalysis
    },
    {
        path: '/dashboard',
        label: '数据面板',
        icon: PieChart
    }
])

// 响应式数据
const searchQuery = ref('')
const isDarkMode = ref(true)
const showNotifications = ref(false)

// 通知数据 - 根据API数据结构
const notifications = ref([])

// 从API加载通知数据的方法
const loadNotifications = async () => {

    // 示例：将API数据转换为组件需要的格式
    const transformApiData = (apiData) => {
        return apiData.map(item => ({
            id: item.id,
            type: item.title.includes('失败') ? 'warning' : 'evaluation_report',
            title: item.title,
            message: item.title.includes('失败')
                ? '您的3D模型评估遇到问题，请检查模型格式或重新提交'
                : '您的3D模型评估已完成，点击查看详细报告',
            createdAt: new Date(item.createTime),
            read: item.readStatus === 1,
            reportId: item.id,
            model3dUrl: item.model3dUrl,
            screenshot: item.screenshot,
            readStatus: item.readStatus
        }))
    }
    try {

        // 这里应该调用您的API
        // const response = await request.get('/api/notifications')
        // const apiData = response.data.data
        const response = await queryReport()
        notifications.value = transformApiData(response)

        // notifications.value = transformApiData(apiData)
    } catch (error) {
        console.error('加载通知失败:', error)
        ElMessage.error('加载通知失败')
    }
}

// 计算属性
const unreadCount = computed(() => {
    return notifications.value.filter(n => !n.read).length
})

const hasUnreadNotifications = computed(() => {
    return unreadCount.value > 0
})

// 主题切换
const toggleTheme = () => {
    isDarkMode.value = !isDarkMode.value
    document.documentElement.classList.toggle('light-mode', !isDarkMode.value)
    ElMessage.success(`已切换到${isDarkMode.value ? '深色' : '亮色'}模式`)
}

// 全屏切换
const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch(err => {
            ElMessage.error('无法进入全屏模式')
        })
    } else {
        document.exitFullscreen()
    }
}

// 通知相关方法
const toggleNotifications = () => {
    showNotifications.value = !showNotifications.value
}

const getNotificationIcon = (type) => {
    const iconMap = {
        'evaluation_report': Document,
        'system': InfoFilled,
        'warning': Warning,
        'success': SuccessFilled,
        'default': Bell
    }
    return iconMap[type] || iconMap.default
}

const getNotificationIconClass = (type) => {
    const classMap = {
        'evaluation_report': 'text-blue-400',
        'system': 'text-cyan-400',
        'warning': 'text-orange-400',
        'success': 'text-green-400',
        'default': 'text-gray-400'
    }
    return classMap[type] || classMap.default
}

const formatTime = (date) => {
    const now = new Date()
    const diff = now - date
    const minutes = Math.floor(diff / 60000)
    const hours = Math.floor(diff / 3600000)
    const days = Math.floor(diff / 86400000)

    if (minutes < 1) return '刚刚'
    if (minutes < 60) return `${minutes}分钟前`
    if (hours < 24) return `${hours}小时前`
    if (days < 7) return `${days}天前`

    return date.toLocaleDateString('zh-CN', {
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    })
}

const handleNotificationClick = async (notification) => {
    // 标记为已读
    if (!notification.read) {
        notification.read = true
        // 调用API标记已读
        await markNotificationAsRead(notification.id)
    }

    if (notification.type === 'evaluation_report' && notification.reportId) {
        viewReport(notification.reportId)
    } else {
        ElMessage.info('通知已查看')
    }
}

const viewReport = (reportId) => {
    showNotifications.value = false
    router.push(`/3d_model_report/${reportId}`)
}

const view3DModel = (modelUrl) => {
    if (modelUrl) {
        // 可以在新窗口打开模型查看器，或者导航到模型页面
        window.open(modelUrl, '_blank')
        ElMessage.success('正在打开3D模型...')
    } else {
        ElMessage.warning('模型链接不可用')
    }
}

const markAllAsRead = async () => {
    try {
        // 批量标记所有通知为已读
        const unreadNotifications = notifications.value.filter(n => !n.read)

        for (const notification of unreadNotifications) {
            notification.read = true
            await markNotificationAsRead(notification.id)
        }

        ElMessage.success('所有通知已标记为已读')
    } catch (error) {
        console.error('标记已读失败:', error)
        ElMessage.error('操作失败，请重试')
    }
}

const markNotificationAsRead = async (notificationId) => {
    try {
        // 调用API标记单个通知为已读
        // await request.post(`/api/notifications/${notificationId}/read`)
        console.log(`标记通知 ${notificationId} 为已读`)
    } catch (error) {
        console.error('标记已读失败:', error)
        throw error
    }
}

const clearAllNotifications = async () => {
    try {
        await ElMessageBox.confirm(
            '确定要清空所有通知吗？此操作不可恢复。',
            '确认清空',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        )

        notifications.value = []
        showNotifications.value = false
        ElMessage.success('所有通知已清空')
    } catch {
        // 用户取消
    }
}

// 用户菜单处理
const handleUserCommand = (command) => {
    switch (command) {
        case 'profile':
            router.push('/profile')
            break
        case 'settings':
            router.push('/settings')
            break
        case 'logout':
            handleLogout()
            break
    }
}

const handleLogout = async () => {
    try {
        await ElMessageBox.confirm(
            '确定要退出登录吗？',
            '确认退出',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        )

        // 执行登出逻辑
        ElMessage.success('已退出登录')
        router.push('/login')
    } catch {
        // 用户取消
    }
}

// 监听点击外部关闭通知
const handleClickOutside = (event) => {
    const container = event.target.closest('.notification-container')
    if (!container && showNotifications.value) {
        showNotifications.value = false
    }
}

onMounted(() => {
    document.addEventListener('click', handleClickOutside)
    // 加载通知数据
    loadNotifications()
})

onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped lang="less">
.app-layout {
    min-height: 100vh;
    background: #0f0f0f;
    color: #f9fafb;
}

// 顶部导航栏
.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(75, 85, 99, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    max-width: 1400px;
    margin: 0 auto;
}

// 左侧导航
.nav-left {
    display: flex;
    align-items: center;
    gap: 32px;
}

.logo-section {
    .logo {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-1px);
        }

        .logo-icon {
            font-size: 32px;
            color: #60a5fa;
        }

        .logo-text {
            font-size: 20px;
            font-weight: 700;
            background: linear-gradient(135deg, #60a5fa, #34d399);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 12px;
    color: #9ca3af;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;

    &:hover {
        color: #f3f4f6;
        background: rgba(55, 65, 81, 0.5);
        transform: translateY(-1px);
    }

    &.active {
        color: #60a5fa;
        background: rgba(96, 165, 250, 0.1);

        &::before {
            content: '';
            position: absolute;
            bottom: -16px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 2px;
            background: linear-gradient(90deg, #60a5fa, #34d399);
            border-radius: 1px;
        }
    }

    .nav-icon {
        font-size: 16px;
    }
}

// 右侧工具栏
.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

// 搜索框
.search-box {
    .search-input {
        width: 240px;

        :deep(.el-input__wrapper) {
            background: rgba(55, 65, 81, 0.5);
            border: 1px solid rgba(75, 85, 99, 0.3);
            border-radius: 12px;
            box-shadow: none;
            transition: all 0.3s ease;

            &:hover {
                border-color: rgba(96, 165, 250, 0.3);
            }

            &.is-focus {
                border-color: #60a5fa;
                box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
            }
        }

        :deep(.el-input__inner) {
            color: #f3f4f6;

            &::placeholder {
                color: #9ca3af;
            }
        }

        .search-icon {
            color: #9ca3af;
        }
    }
}

// 工具栏
.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: rgba(55, 65, 81, 0.5);
    color: #9ca3af;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
        background: rgba(75, 85, 99, 0.7);
        color: #f3f4f6;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .el-icon {
        font-size: 18px;
    }
}

// 通知组件样式
.notification-container {
    position: relative;
}

.notification-trigger {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: rgba(55, 65, 81, 0.5);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
        background: rgba(75, 85, 99, 0.7);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    &.has-unread {
        .notification-icon {
            color: #60a5fa;
            animation: bell-ring 2s ease-in-out infinite;
        }
    }

    .notification-icon {
        font-size: 18px;
        color: #9ca3af;
        transition: color 0.3s ease;
    }

    .notification-badge {
        position: absolute;
        top: -2px;
        right: -2px;

        :deep(.el-badge__content) {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            border: 2px solid #1a1a1a;
            font-size: 10px;
            font-weight: 600;
            min-width: 16px;
            height: 16px;
            line-height: 12px;
            padding: 0 4px;
        }
    }
}

.notification-panel {
    position: absolute;
    top: 50px;
    right: 0;
    width: 360px;
    max-height: 480px;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(75, 85, 99, 0.2);
    background: rgba(31, 41, 55, 0.5);

    .header-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .header-title {
        font-size: 16px;
        font-weight: 600;
        color: #f9fafb;
        margin: 0;
    }

    .unread-indicator {
        font-size: 12px;
        color: #60a5fa;
        background: rgba(96, 165, 250, 0.1);
        padding: 2px 8px;
        border-radius: 10px;
        border: 1px solid rgba(96, 165, 250, 0.2);
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mark-all-btn {
        color: #60a5fa;
        font-size: 12px;

        &:hover {
            color: #93c5fd;
            background: rgba(96, 165, 250, 0.1);
        }
    }

    .close-btn {
        color: #9ca3af;

        &:hover {
            color: #f3f4f6;
            background: rgba(156, 163, 175, 0.1);
        }
    }
}

.notification-content {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #6b7280;

    .empty-icon {
        font-size: 48px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

    .empty-text {
        font-size: 14px;
        margin: 0;
    }
}

.notification-list {
    max-height: 360px;
    overflow-y: auto;
    padding: 8px;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
        background: rgba(75, 85, 99, 0.4);
        border-radius: 2px;
        transition: background 0.3s ease;

        &:hover {
            background: rgba(75, 85, 99, 0.6);
        }
    }

    scrollbar-width: thin;
    scrollbar-color: rgba(75, 85, 99, 0.4) transparent;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid transparent;

    &:hover {
        background: rgba(55, 65, 81, 0.3);
        border-color: rgba(96, 165, 250, 0.2);
    }

    &.unread {
        background: rgba(37, 99, 235, 0.05);
        border-color: rgba(96, 165, 250, 0.1);

        .item-title {
            font-weight: 600;
        }
    }

    &.evaluation-report {
        &:hover {
            background: rgba(37, 99, 235, 0.1);
            border-color: rgba(96, 165, 250, 0.3);
        }
    }
}

.notification-item-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(55, 65, 81, 0.5);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(75, 85, 99, 0.3);

    .item-icon {
        font-size: 16px;
    }
}

.notification-item-content {
    flex: 1;
    min-width: 0;

    .item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
    }

    .item-title {
        font-size: 14px;
        font-weight: 500;
        color: #f9fafb;
        margin: 0;
        line-height: 1.4;
    }

    .item-time {
        font-size: 11px;
        color: #9ca3af;
        flex-shrink: 0;
        margin-left: 8px;
    }

    .item-message {
        font-size: 13px;
        color: #d1d5db;
        line-height: 1.4;
        margin: 0 0 8px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .item-actions {
        margin-top: 8px;

        .el-button {
            height: 24px;
            padding: 0 8px;
            font-size: 12px;
        }
    }
}

.unread-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 6px;
    height: 6px;
    background: #60a5fa;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(96, 165, 250, 0.6);
}

.notification-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(75, 85, 99, 0.2);
    background: rgba(31, 41, 55, 0.3);
    text-align: center;

    .clear-all-btn {
        color: #ef4444;
        font-size: 12px;

        &:hover {
            color: #f87171;
            background: rgba(239, 68, 68, 0.1);
        }
    }
}

.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    z-index: 999;
}

// 用户下拉菜单
.user-dropdown {
    .user-avatar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            background: rgba(55, 65, 81, 0.5);
        }

        .avatar {
            border: 2px solid rgba(96, 165, 250, 0.3);
            transition: border-color 0.3s ease;

            &:hover {
                border-color: rgba(96, 165, 250, 0.6);
            }
        }

        .dropdown-arrow {
            font-size: 12px;
            color: #9ca3af;
            transition: transform 0.3s ease;
        }

        &:hover .dropdown-arrow {
            transform: translateY(1px);
        }
    }
}

.user-dropdown-menu {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(75, 85, 99, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    padding: 8px !important;

    .dropdown-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        color: #f3f4f6 !important;
        font-size: 14px !important;
        transition: all 0.2s ease !important;

        &:hover {
            background: rgba(55, 65, 81, 0.5) !important;
            color: #60a5fa !important;
        }

        &.logout {
            color: #ef4444 !important;

            &:hover {
                background: rgba(239, 68, 68, 0.1) !important;
                color: #f87171 !important;
            }
        }

        .el-icon {
            font-size: 16px;
        }
    }
}

// 主内容区域
.app-main {
    flex: 1;
    min-height: calc(100vh - 64px);
    padding: 0;
}

// 动画
.notification-slide-enter-active,
.notification-slide-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top right;
}

.notification-slide-enter-from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
}

.notification-slide-leave-to {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
}

.overlay-fade-enter-active,
.overlay-fade-leave-active {
    transition: opacity 0.3s ease;
}

.overlay-fade-enter-from,
.overlay-fade-leave-to {
    opacity: 0;
}

// 铃铛摇摆动画
@keyframes bell-ring {

    0%,
    100% {
        transform: rotate(0deg);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: rotate(-3deg);
    }

    20%,
    40%,
    60%,
    80% {
        transform: rotate(3deg);
    }
}

// 亮色模式支持
:global(.light-mode) {
    .app-layout {
        background: #f8fafc;
        color: #1f2937;
    }

    .app-header {
        background: rgba(255, 255, 255, 0.95);
        border-bottom-color: rgba(229, 231, 235, 0.8);
    }

    .nav-item {
        color: #6b7280;

        &:hover {
            color: #1f2937;
            background: rgba(243, 244, 246, 0.5);
        }

        &.active {
            color: #2563eb;
            background: rgba(37, 99, 235, 0.1);
        }
    }

    .tool-button {
        background: rgba(243, 244, 246, 0.5);
        color: #6b7280;

        &:hover {
            background: rgba(229, 231, 235, 0.7);
            color: #1f2937;
        }
    }

    .notification-trigger {
        background: rgba(243, 244, 246, 0.5);

        &:hover {
            background: rgba(229, 231, 235, 0.7);
        }

        .notification-icon {
            color: #6b7280;
        }

        &.has-unread .notification-icon {
            color: #2563eb;
        }
    }

    .notification-panel {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(229, 231, 235, 0.8);
    }

    .notification-header {
        background: rgba(249, 250, 251, 0.5);
        border-bottom-color: rgba(229, 231, 235, 0.5);

        .header-title {
            color: #1f2937;
        }

        .unread-indicator {
            color: #2563eb;
            background: rgba(37, 99, 235, 0.1);
            border-color: rgba(37, 99, 235, 0.2);
        }
    }

    .notification-item {
        &:hover {
            background: rgba(243, 244, 246, 0.3);
            border-color: rgba(37, 99, 235, 0.2);
        }

        &.unread {
            background: rgba(37, 99, 235, 0.05);
            border-color: rgba(37, 99, 235, 0.1);
        }

        .item-title {
            color: #1f2937;
        }

        .item-message {
            color: #4b5563;
        }

        .item-time {
            color: #6b7280;
        }
    }

    .notification-item-icon {
        background: rgba(243, 244, 246, 0.5);
        border-color: rgba(229, 231, 235, 0.5);
    }

    .user-dropdown-menu {
        background: rgba(255, 255, 255, 0.95) !important;
        border-color: rgba(229, 231, 235, 0.8) !important;

        .dropdown-item {
            color: #1f2937 !important;

            &:hover {
                background: rgba(243, 244, 246, 0.5) !important;
                color: #2563eb !important;
            }

            &.logout {
                color: #dc2626 !important;

                &:hover {
                    background: rgba(220, 38, 38, 0.1) !important;
                    color: #ef4444 !important;
                }
            }
        }
    }

    .search-input {
        :deep(.el-input__wrapper) {
            background: rgba(243, 244, 246, 0.5) !important;
            border-color: rgba(209, 213, 219, 0.5) !important;

            &:hover {
                border-color: rgba(37, 99, 235, 0.3) !important;
            }

            &.is-focus {
                border-color: #2563eb !important;
                box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
            }
        }

        :deep(.el-input__inner) {
            color: #1f2937 !important;

            &::placeholder {
                color: #6b7280 !important;
            }
        }

        .search-icon {
            color: #6b7280 !important;
        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .nav-container {
        padding: 0 16px;
    }

    .nav-left {
        gap: 16px;
    }

    .nav-menu {
        display: none;
    }

    .search-box .search-input {
        width: 180px;
    }

    .notification-panel {
        width: 320px;
        max-height: 420px;
        right: -20px;
    }

    .notification-item-content {
        .item-message {
            -webkit-line-clamp: 1;
        }
    }
}

@media (max-width: 640px) {
    .logo-text {
        display: none;
    }

    .nav-right {
        gap: 8px;
    }

    .search-box {
        display: none;
    }

    .toolbar {
        gap: 4px;
    }

    .tool-button,
    .notification-trigger {
        width: 36px;
        height: 36px;

        .el-icon {
            font-size: 16px;
        }
    }

    .user-avatar {
        .avatar {
            width: 28px !important;
            height: 28px !important;
        }
    }
}
</style>